<template>
  <div class="home-layout">
    <div class="layout-inner">
      <!-- 左侧导航 -->
      <Sidebar class="sidebar" />

      <!-- 中间内容 -->
      <div class="home-main">
        <router-view />
      </div>

      <!-- 右侧区域 -->
      <RightAside v-if="!hideRightAside" />
    </div>
  </div>
</template>

<script setup>
import Sidebar from './components/Sidebar.vue'
import RightAside from './components/RightAside.vue'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
const route = useRoute()

// ✅ 只要 path 是 /home/message 就隐藏右侧
const hideRightAside = computed(() => route.path.startsWith('/home/message'))
</script>

<style scoped>
/* 外层居中容器 */
.home-layout {
  display: flex;
  justify-content: center;
  background-color: #f9f9f9;
  min-height: 100vh;
}

/* 内层固定宽度三栏布局 */
.layout-inner {
  display: flex;
  max-width: 1280px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* 左侧 */
.sidebar {
  width: 240px;
  border-right: 1px solid #eee;
}

/* 中间内容 */
.home-main {
  flex: 1;
  padding: 0 20px;

  box-sizing: border-box;
}

/* 右侧已经封装在 RightAside.vue 中，默认宽度 240px */
</style>
